<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		div{float:left;}
		.div1{
			width:200px;
			height:200px;
			padding:1em;
			border:1em solid transparent;
			background:linear-gradient(white,white),
			url(fd.png);
			background-size:cover;
			background-clip:padding-box,border-box;
		}
		/*   #81aa56 0, #81aa56 60%   ---->  这里其实有一个渐变，从蓝色渐变为蓝色，只不过看不出来。   */
		.div2{
			width:200px;
			height:200px;
			padding:1em;
			border: 1em solid transparent;
			background:linear-gradient(white, white),
			url(fd.png);
			background-size:cover;
			background-clip:padding-box,border-box;
			background-origin:border-box;
		}
		.div3{
			width:200px;
			height:200px;
			padding: 1em;
			border:1em solid transparent;
			background:
				linear-gradient(white,white)padding-box,
				url(fd.png)border-box 0 /cover;
		}
		.div4{
			width:200px;
			height:200px;
			padding:1em;
			border:1em solid transparent;
			background:linear-gradient(white,white)padding-box,
			repeating-linear-gradient(-45deg,
				red 0,red 12.5%,
				transparent 0,transparent 25%,
				#58a 0,#58a 37.5%,
				transparent 0,transparent 50%)
				0 / 5em 5em;
		}
		.div5{
			width:200px;
			height:200px;
			padding:1em;
			border:16px solid transparent;
			border-image:16 repeating-linear-gradient(-45deg,
			red 0,red 1em,
			transparent 0,transparent 2em,
			#58a 0,#58a 3em,
			transparent 0,transparent 4em);
		}
		@keyframes ants {to { background-position:100% } }
		.div6{
			width:200px;
			height:200px;
			padding:1em;
			border: 1px solid transparent;
			background:
				linear-gradient(white,white) padding-box,
				repeating-linear-gradient(-45deg,
				black 0,black 25%,white 0,white 50%
				)0 /.6em .6em;
			animation:ants 12s linear infinite;
		}
		.div7{
			width:200px;
			height:200px;
			border-top:.2em solid transparent;
			border-image:100% 0 0 linear-gradient(90deg,
			currentColor 4em,
			transparent 0);
			padding-top:1em;
		}

	</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7">fdsafdsafdsafdsafdsafdsafdsa</div>
</body>
</html>